<template>
    <div id="zhiMaRateChart" style="height: 400px; width: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import {  getCount } from "@/api/channel/countInfo";

export default {
    name: 'ZhiMa',
    data() {
        return {
            myChart: null,
            channelData: null,
        }
    },
    methods: {
        rederData(ageRateData) {
            this.renderRealNameRateChart(ageRateData);

        },
        renderRealNameRateChart(zhiMaRateData) {
            this.myChart = echarts.init(document.getElementById('zhiMaRateChart')); // 初始化ECharts实例
            const option = {
                title: {
                    text: '芝麻分数',
                    subtext: '',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: zhiMaRateData.map(item => item.name),
                },
                series: [
                    {
                        name: '芝麻分',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '70%'],
                        data: zhiMaRateData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            };
            this.myChart.setOption(option);
        },
    }
}
</script>

<style lang="scss" scoped></style>
